import React, { Component } from "react";
import Highlighter from "react-highlight-words";
import { SearchOutlined } from "@ant-design/icons";
import { Link, Route, Switch } from "react-router-dom";
import { Table, Button, Space, Input } from "antd";
import Account from "./Account";
import Machine from "./Machine";
import Relation from "./Relation";
import "./people.less";
export default class people extends Component {
  getColumnSearchProps = (dataIndex) => ({
    filterDropdown: ({
      setSelectedKeys,
      selectedKeys,
      confirm,
      clearFilters,
    }) => (
      <div style={{ padding: 8 }}>
        <Input
          ref={(node) => {
            this.searchInput = node;
          }}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={(e) =>
            setSelectedKeys(e.target.value ? [e.target.value] : [])
          }
          onPressEnter={() =>
            this.handleSearch(selectedKeys, confirm, dataIndex)
          }
          style={{ marginBottom: 8, display: "block" }}
        />
        <Space>
          <Button
            type="primary"
            onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
            icon={<SearchOutlined />}
            size="small"
            style={{ width: 90 }}
          >
            搜索
          </Button>
          <Button
            onClick={() => this.handleReset(clearFilters)}
            size="small"
            style={{ width: 90 }}
          >
            重设
          </Button>
          <Button
            type="link"
            size="small"
            onClick={() => {
              confirm({ closeDropdown: false });
              this.setState({
                searchText: selectedKeys[0],
                searchedColumn: dataIndex,
              });
            }}
          >
            过滤
          </Button>
        </Space>
      </div>
    ),
    filterIcon: (filtered) => (
      <SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
    ),
    onFilter: (value, record) =>
      record[dataIndex]
        ? record[dataIndex]
            .toString()
            .toLowerCase()
            .includes(value.toLowerCase())
        : "",
    onFilterDropdownVisibleChange: (visible) => {
      if (visible) {
        setTimeout(() => this.searchInput.select(), 100);
      }
    },
    render: (text) =>
      this.state.searchedColumn === dataIndex ? (
        <Highlighter
          highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
          searchWords={[this.state.searchText]}
          autoEscape
          textToHighlight={text ? text.toString() : ""}
        />
      ) : text ? (
        text
      ) : (
        "无"
      ),
  });
  handleSearch = (selectedKeys, confirm, dataIndex) => {
    confirm();
    this.setState({
      searchText: selectedKeys[0],
      searchedColumn: dataIndex,
    });
  };
  handleReset = (clearFilters) => {
    clearFilters();
    this.setState({ searchText: "" });
  };
  state = {
    multiData: [],
    searchText: "",
    searchedColumn: "",
    loading: false,
  };
  columns = [
    {
      title: "手机号",
      dataIndex: "phone",
      ...this.getColumnSearchProps("phone"),
    },
    {
      title: "邮箱",
      dataIndex: "email",
      ...this.getColumnSearchProps("email"),
    },
    {
      title: "用户名",
      dataIndex: "name",
      ...this.getColumnSearchProps("name"),
    },
    {
      title: "操作",
      dataIndex: "",
      render: (e) => (
        <Space>
          <Button size="small" type="primary">
            <Link to={"/user/account/" + e.id}>钱包</Link>
          </Button>
          <Button size="small" type="primary">
            <Link to={"/user/machine/" + e.id}>矿机</Link>
          </Button>
          <Button size="small" type="primary">
            <Link to={"/user/relation/" + e.id}>团队</Link>
          </Button>
        </Space>
      ),
    },
  ];
  getData = async () => {
    this.setState({ loading: true });
    const res = await this.http("User", {
      Email: this.state.selectEmail,
      Phone: this.state.selectPhone,
      Name: this.state.selectName,
    });
    // console.log(res.data.dtos);
    this.setState({
      multiData: res.data.dtos,
      loading: false,
    });
  };
  componentDidMount() {
    this.getData();
  }
  onSearchName = (e) => {
    console.log(e);
  };

  render() {
    return (
      <div>
        <Switch>
          <Route path="/user/account/:id" component={Account} />
          <Route path="/user/machine/:id" component={Machine} />
          <Route path="/user/relation/:id" component={Relation} />
          <Route path="/user">
            <Table
              loading={this.state.loading}
              rowKey={(data) => data.id}
              columns={this.columns}
              dataSource={this.state.multiData}
            />
          </Route>
        </Switch>
      </div>
    );
  }
}
